<template>
  <div class="app">
    <el-container>
      <el-header class="navbar">
        <nav-header></nav-header>
      </el-header>
      <el-container class="container">
        <el-aside><history-side @closeWelcome="closeWelcome"></history-side> </el-aside>
        <el-main :class="['main-container', isHiddenChatBg ? '' : 'chat-bg-image']">
          <div class="detail">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, watchEffect, watch, computed } from 'vue'
import { isHiddenChatBg } from '../utils/config'
import { useRouter } from 'vue-router'
import HistorySide from '../components/HistorySide.vue'
import NavHeader from '../components/NavHeader.vue'
import TheWelcome from '../components/TheWelcome.vue'
import ChatToolBar from '../components/chat/ChatToolBar.vue'
import ChatSessionVue from '../components/chat/ChatSession.vue'
import { ChatSession } from '../utils/chat-session'
import { AIGCSession } from '../utils/aigc-session'
import { aiAgentStore } from '../stores/ai-agent'
import { type Conversion, type ChatMessage, AIGCStatus, type AIAgent } from '../utils/interface'
import agentMgr from '../utils/ai-agent'
import chatMgr from '../utils/chat-manager'
import EnvConfig from '../utils/config'
const agentStore = aiAgentStore()
const router = useRouter()
const isShowWelcome = ref<boolean>(true)
let conversionInfo = ref<any>({})
let chatInstance: ChatSession
let aigcInstance: AIGCSession
const historyMessageList = ref<ChatMessage[]>([])
const handleMessage = ref<any>({})
const messageList = ref<any>([])
let agentInfo = ref<any>({})
let conversionId = ref<string>('')
const agentId = ref(router.currentRoute.value.query.agentid)
const isNewDefaultChatFlag = ref<boolean>(true)

onMounted(() => {
  // 获取 URL 参数
  // 初始化或更新应用状态
  agentMgr.getMyAIAgents()
  chatMgr.getChatHistory()
  //配置主页是否显示欢迎页面
  if (EnvConfig?.chat_become_home) {
    isShowWelcome.value = false
    conversionId.value = ''
  }

  chatInstance = new ChatSession(agentMgr.defaultAgent, '', true)
  chatInstance?.aicgSession?.cancel()
  historyMessageList.value = chatInstance?.historyMessageList || [] //历史消息
  handleMessage.value = chatInstance?.aicgSession?.handleMessage || {} //当前正在生成的消息
  messageList.value = chatInstance?.aicgSession?.messageList || []
})
// agentInfo = agentStore.myAgents[0]
// computed(() => count.value + 1, {
//   onTrack(e) {
//     debugger
//   },
//   onTrigger(e) {
//     debugger
//   }
// })

// let agentInfo = computed(() => {
//   return agentStore.myAgents[0]
// })
//打开会话
const closeWelcome = (item: any, type: String) => {
  chatInstance = null
  agentInfo.value = {}
  conversionId.value = ''
  conversionInfo.value = item
  if (type === 'agent') {
    //切换智能体
    agentInfo.value = item
    conversionId.value = ''
  } else if (type === 'conversion') {
    //切换会话
    agentInfo.value = conversionInfo.value?.agentInfo
    conversionId.value = conversionInfo.value?.conversionId
  }
  chatInstance = new ChatSession(agentInfo.value, conversionId.value, true)
  chatInstance?.aicgSession?.cancel()
  historyMessageList.value = chatInstance?.historyMessageList || [] //历史消息
  handleMessage.value = chatInstance?.aicgSession?.handleMessage || {} //当前正在生成的消息
  messageList.value = chatInstance?.aicgSession?.messageList || []
  isShowWelcome.value = false

  if (type === 'agent' && agentMgr.isDefaultAgent(item)) {
    isNewDefaultChatFlag.value = true
    isShowWelcome.value = !EnvConfig?.chat_become_home
  }
}

//发送消息
const sendMessage = (value: string) => {
  isNewDefaultChatFlag.value = false
  isShowWelcome.value = false
  chatInstance.sendMessage(value)
}

watchEffect(() => {
  const agentIdList = agentStore?.myAgents || []
  let agentItem: any
  if (agentId.value) {
    agentItem = agentIdList.find((ele) => ele?.id == agentId.value)
  } else {
    agentItem = agentStore?.myAgents[0]
  }
  agentInfo.value = conversionInfo.value?.conversionId ? conversionInfo.value?.agentInfo : agentItem
  conversionId.value = conversionInfo.value?.conversionId || ''
  if (agentInfo.value) {
    if (!chatInstance) {
      chatInstance = new ChatSession(agentInfo.value, conversionId.value, true)
    }
    historyMessageList.value = chatInstance?.historyMessageList || [] //历史消息
    handleMessage.value = chatInstance?.aicgSession?.handleMessage || {} //当前正在生成的消息
    messageList.value = chatInstance?.aicgSession?.messageList || []
  }
})
// watch(
//   () => agentInfo.value,
//   (newValue, oldValue) => {
//     if (newValue) {
//       if (!chatInstance) {
//         chatInstance = new ChatSession(newValue, conversionId.value, true)
//       }
//       historyMessageList.value = chatInstance?.historyMessageList || [] //历史消息
//       handleMessage.value = chatInstance?.aicgSession?.handleMessage || {} //当前正在生成的消息
//       messageList.value = chatInstance?.aicgSession?.messageList || []
//     }
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )
// watch(() => historyMessageList.value,(newValue,oldValue) =>
//   {
//     if(newValue){
//       historyMessageList.value = newValue || [];              //历史消息
//     }
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )

// watch(() => messageList.value,(newValue,oldValue) =>
//   {
//     if(newValue){
//       messageList.value = newValue || [];              //历史消息
//     }
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )

// watch(() => handleMessage.value,(newValue,oldValue) =>
//   {
//     if(newValue){
//       handleMessage.value = newValue || {};              //当前正在生成的消息
//     }
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )

// watch(
//     () => historyMessageList.value,(val, oldVal) => {
//         console.log(val,'watch messgag123456789')
//     },
//     {
//         deep: true,
//         immediate: true
//     }
// );
// agentInfo = agentStore.myAgents[0];
</script>

<style scoped lang="scss">
.app {
  background-color: var(--crp-bg-color);
  background-image: url('@/assets/img/web-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.el-header {
  --el-header-height: 64px;
}

.el-aside {
  --el-aside-width: 280px;
  height: calc(100% + 64px - 16px);
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.el-container {
  height: calc(100% - 64px);
}

.el-main {
  --el-main-padding: var(--crp-padding-base);
}

.el-main::-webkit-scrollbar {
  display: none;
}

.navbar {
  width: 100%;
  padding: 0;
  padding-left: var(--crp-padding-extra-large);
  padding-right: var(--crp-padding-base);
}

.container {
  display: flex;
  flex: 1;
  width: 100%;
  // background-color: rgba(225, 225, 225, 0.7);
}

.chat-bg-image {
  background-image: url('@/assets/img/chat-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom right;
}

.main-container {
  flex: 1;
  min-width: 768px;
  height: calc(100% - var(--crp-margin-base) + 64px);

  margin-right: var(--crp-margin-base);

  border-top-left-radius: var(--crp-border-radius-large);
  border-top-right-radius: var(--crp-border-radius-large);
  -webkit-border-top-left-radius: var(--crp-border-radius-large);
  -webkit-border-top-right-radius: var(--crp-border-radius-large);

  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);

  border: 1px solid #ffffff;

  padding-left: var(--crp-padding-extra-large);
  padding-top: var(--crp-padding-extra-large);
  /* 隐藏滚动条 */
  .el-scrollbar__wrap::-webkit-scrollbar {
    width: 0; /* 隐藏滚动条 */
    height: 0; /* 隐藏滚动条 */
  }

  /* 隐藏滚动条轨道 */
  .el-scrollbar__wrap::-webkit-scrollbar-track {
    display: none;
  }

  /* 隐藏滚动条滑块 */
  .el-scrollbar__wrap::-webkit-scrollbar-thumb {
    display: none;
  }

  /* 确保在 hover 状态下滚动条也不可见 */
  .el-scrollbar__wrap:hover::-webkit-scrollbar {
    width: 0; /* 隐藏滚动条 */
    height: 0; /* 隐藏滚动条 */
  }

  .el-scrollbar__wrap:hover::-webkit-scrollbar-track {
    display: none;
  }

  .el-scrollbar__wrap:hover::-webkit-scrollbar-thumb {
    display: none;
  }

  /* 确保在滚动时滚动条也不可见 */
  .el-scrollbar__wrap:active::-webkit-scrollbar {
    width: 0; /* 隐藏滚动条 */
    height: 0; /* 隐藏滚动条 */
  }

  .el-scrollbar__wrap:active::-webkit-scrollbar-track {
    display: none;
  }

  .el-scrollbar__wrap:active::-webkit-scrollbar-thumb {
    display: none;
  }
  .scroll-container {
    height: calc(100% - 126px);
  }
}

.detail {
  display: flex;
  margin: 0 auto;
  max-width: 1148px;
  width: 85%;
  min-width: 968px;
  height: 100%;
  flex-direction: column;
}

:deep(.conversation-bottom) {
  z-index: 1000;
  margin-top: var(--crp-margin-extra-large);
  .tran {
    width: 100%;
    transform: translate(36px);
    height: 56px;
    background: linear-gradient(0deg, var(#fff, #fff) 23.17%, hsla(0, 0%, 100%, 0) 108.94%);
    position: absolute;
    top: -56px;
    left: -36px;
    pointer-events: none;
  }

  .conversation-input {
    z-index: var(--el-index-top);
    margin: 0 auto;
    width: 800px;
    // height: 64px;
    background: var(--crp-bg-color-area);
    border-radius: 8px;
    border: 1px solid var(--crp-border-color);
    display: flex;
    align-items: center;
  }

  .footer {
    margin-top: var(--crp-margin-base);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-placeholder);

    height: 18px;

    font-weight: 400;
    font-size: var(--crp-font-size-extra-small);
    line-height: 18px;
    text-align: center;
  }
}
</style>
